<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>
    <link rel="stylesheet" th:href="@{/css/custom-style.css}">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.min.css}">
    <script th:src="@{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.1.3/js/bootstrap.min.js}"></script>
</head>
<body>

<div th:replace="templates::topbar(currentPage='index')"></div>


<div class="container">
    <div class="card shadow-sm">
        <div class="card-body">
            <h1>Search Result</h1>
        </div>
        <hr>
        <div class="card-body">
            <div id="videoCards">
                <div class="row mb-2">
                    <div th:each="video: ${videos}">

                        <div class="card-body text-center">
                            <a th:href="'/vid/' + ${video.video.videoId}">
                                <div>
                                    <img th:src="${video.video.cover == null ? '/img/defaultVideoCover.png' : video.video.cover}"
                                         class="video-cover">
                                    <p class="mt-2 font-weight-bold card-text" style="font-size: 14px"
                                       th:text="${video.video.videoName}"></p>
                                </div>
                            </a>
                            <hr>
                            <a th:href="'/uid/' + ${video.user.userId}">
                                <div class="text-right mr-2">
                                    <div class="d-inline-block" style="font-size: 12px">
                                        <span th:text="${video.user.userName}"></span>
                                        <p th:text="${video.video.uploadTime}"></p>
                                    </div>
                                    <img th:src="${video.user.userIcon}" alt=""
                                         class="user-small rounded-circle img-fluid">
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


</body>
</html>